<template>
	<div class="cmsarticle-edit padding10">
		<el-form label-position="left" label-width="150px" ref="form" :model="form" :rules="rules">
			<el-row :gutter="20">
				<el-col :span="15">
					<div class="header">
						<div class="title">写文章</div>
					</div>
					<el-form-item prop="title">
						<template #label>
							<div style="text-align: center">文章标题</div>
						</template>
						<el-input v-model="form.title" autocomplete="off" placeholder="请输入标题" clearable></el-input>
					</el-form-item>
					<el-form-item prop="contents">
						<template #label>
							<div style="text-align: center">文章内容</div>
						</template>
						<fortress-wang-editor v-model="form.contents" ref="FEditor"></fortress-wang-editor>
					</el-form-item>
					<!-- <el-form-item label="纠错" v-if="corrErrorList.length">
						<div style="overflow: auto; max-height: 135px">
							<el-tag
								style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center"
								type="primary"
								class="corr-item"
								v-for="(item, index) in corrErrorList"
								:key="index"
								closable
								@close="onCorrErrorList(index)"
							>
								文字位置: {{ item.BeginOffset }} 原文: {{ item.Word }} : 建议变更: {{ item.CorrectWord }} &lt;{{
									item.topDown
								}}&gt;
							</el-tag>
						</div>
					</el-form-item> -->
					<el-form-item v-if="politics.length">
						<template #label>
							<span>
								内容检查
								<el-tooltip placement="top">
									<div slot="content">启用压缩后会将存储图片格式转换为webp格式</div>
									<i class="el-icon-info"></i>
								</el-tooltip>
							</span>
						</template>
						<div style="overflow: auto; max-height: 235px">
							<div v-for="(item, index) in politics" :key="index">
								<el-tag
									style="
										margin-bottom: 10px;
										display: flex;
										justify-content: space-between;
										align-items: center;
										white-space: initial;
										height: auto;
									"
									:type="item.Score >= 30 ? 'danger' : 'success'"
									class="corr-item"
									closable
									@close="onClosePolitics(index)"
								>
									关键字: {{ item.Keywords }} - 涉及{{ item.title }}
								</el-tag>
							</div>
						</div>
					</el-form-item>

					<div class="header">
						<div class="title">默认属性</div>
					</div>
					<el-form-item>
						<template #label>
							<div style="text-align: center">发布时间</div>
						</template>
						<el-date-picker
							v-model="form.pubdate"
							align="right"
							type="datetime"
							placeholder="选择发布时间"
							value-format="yyyy-MM-dd HH:mm:ss"
						></el-date-picker>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center">作者</div>
						</template>
						<el-input type="text" clearable v-model="form.author" placeholder="请输入作者"></el-input>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center">文章来源</div>
						</template>
						<el-input type="text" clearable v-model="form.source" placeholder="请输入文章来源"></el-input>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center">文章摘要</div>
						</template>
						<el-row type="flex" justify="space-between">
							<el-col :span="20">
								<el-input
									type="textarea"
									:rows="2"
									placeholder="请输入摘要"
									v-model="form.info"
									clearable
								></el-input>
							</el-col>
							<el-col :span="2" v-if="API_AUTOSUMMARIIZATION">
								<el-button size="mini" type="primary" @click="onGetSunnarization">一键识别</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center">文章属性</div>
						</template>
						<el-checkbox-group v-model="form.attr">
							<el-checkbox v-for="item in attrList" :label="item.id" :key="item.id">{{ item.title }}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center">所属专题</div>
						</template>
						<el-row type="flex" justify="space-between">
							<el-col :span="20">
								<el-select v-model="form.special" multiple clearable style="width: 100%">
									<el-option v-for="item in specialList" :value="item.id" :label="item.name" :key="item.id">
										{{ item.name }}
									</el-option>
								</el-select>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center;">TAG标签</div>
						</template>
						<el-row type="flex" justify="space-between">
							<el-col :span="20">
								<el-select
									v-model="form.tags"
									multiple
									filterable
									allow-create
									default-first-option
									clearable
									placeholder="请选择文章标签"
									style="width: 100%"
								>
									<el-option
										v-for="item in tagList"
										:key="item.id"
										:label="item.title"
										:value="item.id"
									></el-option>
								</el-select>
							</el-col>
							<el-col :span="2">
								<el-button size="mini" type="primary">一键识别</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center">SEO关键字</div>
						</template>
						<el-row type="flex" justify="space-between">
							<el-col :span="20">
								<el-input
									type="textarea"
									autosize
									placeholder="请输入SEO关键字"
									v-model="form.keywords"
									clearable
								></el-input>
							</el-col>
							<el-col :span="2" v-if="API_KEYWORDSEXTRACTION">
								<el-button size="mini" type="primary" @click="onKnowKeyword">提取关键字</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center">浏览量</div>
						</template>
						<el-input type="number" clearable v-model="form.click" placeholder="请输入浏览量"></el-input>
					</el-form-item>
					<el-form-item>
						<template #label>
							<div style="text-align: center">
								权重
								<el-tooltip content="提示文字" placement="top">
									<i class="el-icon-info"></i>
								</el-tooltip>
							</div>
						</template>
						<el-input type="number" clearable v-model="form.sort" placeholder="请输入权重"></el-input>
					</el-form-item>

					<!-- <div class="header">
            <div class="title">附件上传</div>
          </div>
          <el-form-item>
            <template #label>
              <div style="text-align: center;">附件上传</div>
            </template>
            <fortress-upload type="file" name="annexs" v-model="form"></fortress-upload>
            <resource-select modelName="form.annexs" type="image" @choosed="resourceChoosed"></resource-select>
          </el-form-item>

          <div class="header">
            <div class="title">图片</div>
          </div>
          <div class="mb">
            <fortress-upload type="image" name="picname" v-model="form"></fortress-upload>
            <resource-select modelName="form.picname" type="image" @choosed="resourceChoosed"></resource-select>
          </div> -->
					<div v-for="(item, index) in expandedFields" :key="index">
						<div class="header">
							<div class="title">{{ item.colTitle }}</div>
						</div>
						<el-form-item v-if="item.formType == 1">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<el-input
								v-model="colData[item.propName]"
								:placeholder="`请输入${item.colTitle}`"
								clearable
							></el-input>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 2">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 多行文本 2-->
							<el-input
								type="textarea"
								:rows="2"
								:placeholder="`请输入${item.colTitle}`"
								v-model="colData[item.propName]"
							></el-input>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 3">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 富文本 3-->
							<fortress-wang-editor v-model="colData[item.propName]"></fortress-wang-editor>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 4">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 下拉 4-->
							<el-select v-model="colData[item.propName]" placeholder="请选择">
								<el-option v-for="c in item.listdataConfig" :label="c" :key="c" :value="c"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 5">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 单选框 5-->
							<el-radio-group v-model="colData[item.propName]">
								<el-radio v-for="c in item.listdataConfig" :label="c" :key="c">{{ c }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 6">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 复选框 6-->
							<el-checkbox-group v-model="colData[item.propName]">
								<el-checkbox v-for="c in item.listdataConfig" :label="c" :key="c">{{ c }}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 7">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 日期 7-->
							<el-date-picker
								v-model="colData[item.propName]"
								type="date"
								placeholder="选择日期"
								value-format="yyyy-MM-dd"
							></el-date-picker>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 8">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 日期时间 8-->
							<el-date-picker
								v-model="colData[item.propName]"
								type="datetime"
								placeholder="选择日期时间"
								value-format="yyyy-MM-dd HH:mm:ss"
							></el-date-picker>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 9">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 图片上传组件 9-->
							<template v-if="item.limitSize > 1">
								<!-- <fortress-upload type="image" :name="item.propName" :formData="colData" :multiple="true" :limit="item.limitSize"></fortress-upload> -->
								<picture-upload
									type="picture-card"
									v-model="colData[item.propName]"
									:multiple="true"
									:limit="item.limitSize"
									:fixed="false"
								></picture-upload>
								<resource-select
									:modelName="`colData.${item.propName}`"
									type="image"
									:multiple="true"
									@choosed="resourceChoosed"
								></resource-select>
							</template>
							<template v-else>
								<!-- <fortress-upload type="image" :name="item.propName" :formData="colData"></fortress-upload> -->
								<picture-upload
									type="picture-card"
									v-model="colData[item.propName]"
									:limit="1"
									:fixed="false"
								></picture-upload>
								<resource-select
									:modelName="`colData.${item.propName}`"
									type="image"
									@choosed="resourceChoosed"
								></resource-select>
							</template>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 10">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 文件上传组件 10 默认多个-->
							<fortress-upload
								type="file"
								:formData="colData"
								:multiple="true"
								:limit="item.limitSize"
								:name="item.propName"
							></fortress-upload>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 11">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 视频上传组件 11-->
							<fortress-upload type="video" :formData="colData" :limit="1" :name="item.propName"></fortress-upload>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 12">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>

							<!-- 开关 12-->
							<el-switch
								v-model="colData[item.propName]"
								active-text="按月付费"
								inactive-text="按年付费"
							></el-switch>
						</el-form-item>
						<el-form-item v-else-if="item.formType == 13">
							<template #label>
								<div style="text-align: center">{{ item.colTitle }}</div>
							</template>
							<!-- 计数器 13-->
							<el-input-number v-model="colData[item.propName]"></el-input-number>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="9">
					<div class="button-group">
						<el-button class="button" type="primary" size="medium" @click="submit('save')" v-if="form.auditflag">
							去审核
						</el-button>
						<el-button
							class="button"
							type="primary"
							size="medium"
							@click="submit('save')"
							:loading="submitLoading"
							v-else
						>
							去发布
						</el-button>
						<el-button class="button" type="info" size="medium" @click="submit('draft')">存草稿</el-button>
						<!-- <el-button
							class="button"
							v-if="API_TEXTCORRECTION"
							type="success"
							plain
							size="medium"
							@click="onTextcorrection"
						>
							内容纠错
						</el-button> -->
						<el-button class="button" v-if="API_TEXTAUDIT" type="success" plain size="medium" @click="onTextAudit">
							内容审核
						</el-button>
						<div class="plac"></div>
						<!-- <div class="delete button">
              <i class="el-icon-delete"></i>
              移至垃圾箱
            </div> -->
					</div>

					<div class="header">
						<div class="title">所属栏目</div>
					</div>
					<div class="column mb">
						<v-column v-model="form.channelId" :name.sync="form.channelIdName"></v-column>
					</div>

					<div class="header">
						<div class="title">缩略图</div>
					</div>
					<div class="mb">
						<!-- <fortress-upload type="image" name="picname" v-model="form"></fortress-upload> -->
						<picture-upload :fixed="false" type="picture-card" v-model="form.picname" :limit="1"></picture-upload>
						<resource-select modelName="form.picname" type="image" @choosed="resourceChoosed"></resource-select>
					</div>

					<template v-if="form.status == 3">
						<div class="header">
							<div class="title">拒绝原因</div>
						</div>
						<el-tag type="info" class="audit-info">{{ form.auditop }}</el-tag>
					</template>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
import request from "@/common/request"
import { ct } from "@/mixins/mixmethod.js"

import VColumn from "./components/column.vue"
import ResourceSelect from "@/components/resource-select.vue"

import { enumList } from "@/api/public.api.js"
import { cmssystagList } from "@/api/cms/cmssystag.js"
import { cmscusttagList } from "@/api/cms/cmscusttag.js"
import { cmssubjectList } from "@/api/cms/cmssubject.js"
import { cmschannelCols } from "@/api/cms/cmschannel.js"
import { cmsarticleInfo, cmsarticleSave, cmsarticleEdit } from "@/api/cms/cmsarticle.js"
import pictureUpload from "@/components/fortress-upload/picture-upload.vue"

export default {
	name: "cmsarticle-edit",
	mixins: [ct],
	data() {
		return {
			form: {
				id: "",
				modelId: "",
				title: "",
				author: "",
				source: "",
				contents: "",
				info: "",
				keywords: "",
				picname: "",
				publisher: "",
				pubdate: "",
				url: "",
				click: "",
				sort: "",
				auditer: "",
				auditop: "",
				channelId: "",
				channelIdName: "",
				attr: [],
				tags: [],
				special: [],
				colData: {},

				annexs: "",
				people: "",
				// auditUser: [],
				// auditflag: false,
			},
			rules: {
				title: [{ required: true, message: "请输入标题", trigger: "blur" }],
				// contents: [{ required: true, message: "请输入内容", trigger: "blur" }],
				channelId: [{ required: true, message: "请输入栏目", trigger: "blur" }],
			},

			attrList: [], // 文章属性
			tagList: [], // TAG标签
			specialList: [], // 专题
			ArticleStatus_cmsList: [], // 文章状态

			// auditerVisible: false, // 审核人弹窗

			expandedFields: [],
			colData: {},
			API_KEYWORDSEXTRACTION: false,
			API_AUTOSUMMARIIZATION: false,
			API_TEXTCORRECTION: false,
			API_TEXTAUDIT: false,

			corrErrorList: [],
			politics: [],

			submitLoading: false,
		}
	},
	computed: {
		isEdit() {
			return !!this.$route.query.id
		},
	},
	created() {
		this.form.id = this.$route.query.id || ""
		this.getAttrList()
		this.getIsOpen()
		if (this.isEdit) {
			this.getArticleInfo()
		}
	},
	methods: {
		getIsOpen() {
			;(async () => {
				const { code, data, msg } = await request("get", "/bindapi/isopen", {
					apiCode: "API_KEYWORDSEXTRACTION",
				})
				if (code == 0) {
					this.API_KEYWORDSEXTRACTION = data
					console.log("data", data)
				} else {
					this.$message.error(msg)
				}
			})()
			;(async () => {
				const { code, data, msg } = await request("get", "/bindapi/isopen", {
					apiCode: "API_AUTOSUMMARIIZATION",
				})
				if (code == 0) {
					this.API_AUTOSUMMARIIZATION = data
				} else {
					this.$message.error(msg)
				}
			})()
			;(async () => {
				const { code, data, msg } = await request("get", "/bindapi/isopen", {
					apiCode: "API_TEXTCORRECTION",
				})
				if (code == 0) {
					this.API_TEXTCORRECTION = data
				} else {
					this.$message.error(msg)
				}
			})()
			;(async () => {
				const { code, data, msg } = await request("get", "/bindapi/isopen", {
					apiCode: "API_TEXTAUDIT",
				})
				if (code == 0) {
					this.API_TEXTAUDIT = data
				} else {
					this.$message.error(msg)
				}
			})()
		},

		getAttrList() {
			cmssystagList().then(({ code, data }) => {
				if (code == 0) {
					this.attrList = data
				}
			})
			cmscusttagList().then(({ code, data }) => {
				if (code == 0) {
					this.tagList = data
				}
			})
			cmssubjectList().then(({ code, data }) => {
				if (code == 0) {
					this.specialList = data
				}
			})
			enumList("ArticleStatus", "cms").then(({ code, data }) => {
				if (code == 0) {
					this.ArticleStatus_cmsList = data
				}
			})
		},
		async getArticleInfo() {
			const { code, data, msg } = await cmsarticleInfo(this.form.id)
			if (code != 0) {
				return this.$message.error(msg)
			}
			if (data.colData) {
				Object.keys(data.colData).forEach(item => {
					if (!(item in this.colData)) {
						//这样添加属性是为了能被watch
						this.$set(this.colData, item, "")
					}
				})
			}
			this.colData = Object.assign(this.colData, data.colData)
			this.form = Object.assign(this.form, data)
		},
		async getExpandedFields() {
			const { code, data, msg } = await cmschannelCols(this.form.channelId)
			if (code != 0) {
				return this.$message.error(msg)
			}

			data.cols.map(item => {
				if (item.listdataConfig) {
					item.listdataConfig = item.listdataConfig.split(",")
				}
				this.colData[item.propName] = this.colData[item.propName] || ""
			})
			this.form.modelId = data.modelId
			this.expandedFields = data.cols

			const colData = {}
			data.cols.forEach(item => {
				colData[item.propName] = this.colData[item.propName]
			})
			this.colData = colData
		},
		submit(type) {
			if (!this.form.channelId) {
				return this.$message.error("请选择栏目")
			}
			this.$refs["form"].validate(async error => {
				if (!error) {
					console.log(error)
					return
				}

				if (!this.form.pubdate) {
					this.form.pubdate = `${new Date().getFullYear()}-${new Date().getMonth() +
						1}-${new Date().getDate()} ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
				}

				this.submitLoading = true

				this.form.status = "0"
				if (type == "save") {
					this.form.status = "2"
				}

				this.expandedFields.map(item => {
					this.form.colData[item.propName] = this.colData[item.propName]
				})

				try {
					if (this.isEdit) {
						const { code, msg } = await cmsarticleEdit(this.form)
						this.submitLoading = false
						if (code != 0) {
							this.submitLoading = false
							throw new Error(msg)
						}
					} else {
						const { code, msg } = await cmsarticleSave(this.form)
						this.submitLoading = false
						if (code != 0) {
							this.submitLoading = false
							throw new Error(msg)
						}
					}
					this.$message.success(this.isEdit ? "修改成功" : "添加成功")
					this.$router.go(-1)
				} catch (error) {
					this.submitLoading = false
					this.$message.error("提交错误, 请检查数据")
					console.log(error)
				}
			})
		},

		// cancelAuditer() {
		// 	this.auditerVisible = false
		// },
		// confirmAuditer() {
		// 	this.$refs.auditer.onSubmit()
		// 	this.cancelAuditer()
		// },

		async onKnowKeyword() {
			if (this.form.contents == "") {
				return this.$message.error("请先输入文章内容")
			}
			const text = this.$refs.FEditor.getText()
			const { code, data, msg } = await request("post", "/bindapi/keywordsExtraction", {
				text,
				num: 10,
			})
			if (code != 0) {
				return this.$message.error(msg)
			}
			this.form.keywords = data
		},
		async onGetSunnarization() {
			if (this.form.contents == "") {
				return this.$message.error("请先输入文章内容")
			}
			const text = this.$refs.FEditor.getText()
			const { code, data, msg } = await request("post", "/bindapi/autoSummarization", {
				text,
				num: 100,
			})
			if (code != 0) {
				this.$message.error(msg)
			}
			this.form.info = data
		},

		onCorrErrorList(index) {
			this.corrErrorList.splice(index, 1)
		},
		// async onTextcorrection() {
		// 	if (this.form.contents == "") {
		// 		return this.$message.error("请先输入文章内容")
		// 	}
		// 	const text = this.$refs.FEditor.getText()
		// 	const content = text.replace(/\n|\r/g, " ")
		// 	const number = Math.ceil(content.length / 1999)
		// const list = []
		// for (let i = 0; i < number; i++) {
		// 	list.push(
		// 		new Promise(async (resolve, reject) => {
		// 			const { code, data, msg } = await request("post", "/bindapi/textCorrection", {
		// 				text: content.substring(i * 1999, (i + 1) * 1999),
		// 			})
		// 			if (code != 0) {
		// 				this.$message.error(msg)
		// 				return reject(msg)
		// 			}
		// 			resolve(data)
		// 		}),
		// 	)
		// }
		// const data = await Promise.all(list)

		// const { code, data, msg } = await request("post", "/bindapi/textCorrection", {
		// 	text: content,
		// })
		// if (code != 0) {
		// 	this.$message.error(msg)
		// 	return
		// }

		// let errorList = []
		// data.forEach(({ CCITokens }) => {
		// 	CCITokens.map(item => {
		// 		item.topDown = content.substring(
		// 			item.BeginOffset - 3 < 0 ? 0 : item.BeginOffset - 3,
		// 			+item.BeginOffset + 5 > content.length ? content.length : +item.BeginOffset + 5,
		// 		)
		// 	})

		// 	errorList = errorList.concat(CCITokens)
		// })

		// 	this.corrErrorList = errorList
		// },

		onClosePolitics(index) {
			this.politics.splice(index, 1)
		},
		async onTextAudit() {
			if (this.form.contents == "") {
				return this.$message.error("请先输入文章内容")
			}
			const text = this.$refs.FEditor.getText()
			const content = text.replace(/\n|\r/g, "")
			const number = Math.ceil(content.length / 1999)
			const list = []
			for (let i = 0; i < number; i++) {
				list.push(
					new Promise(async (resolve, reject) => {
						const { code, data, msg } = await request("post", "/bindapi/textAudit", {
							text: content.substring(i * 1999, (i + 1) * 1999),
						})
						if (code != 0) {
							this.$message.error(msg)
							return reject(msg)
						}
						resolve(data)
					}),
				)
			}
			const data = await Promise.all(list)

			const politics = []
			data.forEach(({ Section }) => {
				const { PornInfo, TerrorismInfo, PoliticsInfo, AdsInfo, IllegalInfo, AbuseInfo } = Section
				politics.push({
					...PornInfo,
					title: "色情",
				})
				politics.push({
					...TerrorismInfo,
					title: "暴恐",
				})
				politics.push({
					...PoliticsInfo,
					title: "政治敏感",
				})
				politics.push({
					...AdsInfo,
					title: "广告",
				})
				politics.push({
					...IllegalInfo,
					title: "违法",
				})
				politics.push({
					...AbuseInfo,
					title: "谩骂",
				})
			})
			this.politics = politics.sort((a, b) => b.Score - a.Score)
		},
	},
	watch: {
		"form.channelId"() {
			if (this.form.channelId) {
				this.getExpandedFields()
			}
		},
		// colData: {
		// 	deep: true,
		// 	handler(colData) {
		// 		console.log(colData)
		// 		this.colData = colData
		// 	},
		// },
	},
	components: {
		ResourceSelect,
		VColumn,
		pictureUpload,
	},
}
</script>

<style lang="scss" scoped>
.mb {
	margin-bottom: 15px;
}

.padding10 {
	padding: 10px 20px;
	background-color: #fff;
	/* max-height: 600px; */
	overflow: auto;
	border-radius: 4px;
	box-shadow: 0 1px 2px 0 rgba(#000, 0.05);
}

.header {
	height: 47px;
	font-size: 16px;
	color: #515a6e;
	background: #f0f0f0;
	border-radius: 6px 6px 0 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	margin-bottom: 15px;

	.title {
		margin-left: 38px;
		line-height: 40px;
		padding: 0 10px;
		background: #fff;
		border-radius: inherit;
	}
}

.upload-button {
	position: relative;

	.upload-input {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		opacity: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;

		&::-webkit-file-upload-button {
			cursor: pointer;
		}
	}
}

.button-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;

	.button {
		white-space: nowrap;
		flex: none;
	}

	.plac {
		width: 100%;
	}

	.delete {
		color: #0cafcc;
		cursor: pointer;
	}
}

.column {
	max-height: 436px;
	overflow-y: auto;
}
</style>

<style lang="scss">
.cmsarticle-edit {
	.ele-form {
		.el-col {
			width: 100%;
		}
	}
}

.el-form--label-left .el-form-item__label {
	display: flex;
	justify-content: flex-end;
}

.audit-info {
	display: block;
	white-space: initial;
	height: auto;
}
</style>
